<!DOCTYPE html>
<html lang="en">
<!--刘艺广-->
<head>
    <meta charset="UTF-8">
    <title>海量题库</title>
</head>
<style>
    #tkDiv{
        border: 0px solid;
        width: 1000px;
        margin: 0 auto;
    }
    #searchDiv{
        margin: 0 auto;
        border: 0px solid;
        width: 680px;
    }
    .styleSel{
        height: 30px;
        background-color: dodgerblue;
        border: 0;
        font-weight: 300;
        color: white;
    }
    #search{
        height: 30px;
        background-color: #F2F2F2;
    }
    .searchbtn{
        border: 0px;
        background-color:dodgerblue;
        color: white;
        font-weight: 300;
        height: 33px;
    }
    #addTkbtn{
        background-color:#5EB95E;
        border: 0;
        height: 33px;
        width: 80px;
        color: white;
        font-weight: 300;
        float: right;
    }
    #tkTab {
        width: 1000px;
    }
    #pageControl{
        padding: 50px;
        border: 0px solid;
        width: 700px;
        margin:0 auto;
    }
    .turn{
        padding: 50px;
        text-decoration: none;
    }
    .tkIndex{
        width: 4%;
        background: url("/image/未标题-1.png") no-repeat;
        background-position: center;
        background-size: 30px;
        font-weight: 700;
        color: white;
        text-align: center;
    }
    #title{
        font-size: 50px;
        width: 200px;
        margin:0 auto;
        font-family: 宋体;
        color: dodgerblue;
    }
    .tkForEdit {
        width: 500px;
    }
    .answerOption{
        width: 10%;
        text-align: center;
    }
    .operation{
        text-align: center;
    }
    .tkForEdit{
        padding-top: 5px;
        width:70%;
    }
    .selectTab,.judgeTab{
        width: 100%;
    }
    .selectTab{
        height: 170px;
        border: 1px solid cadetblue;
        border-left: none;
        border-right: none;
    }
    .judgeTab{
        height: 65px;
        border: 1px solid cadetblue;
        border-left: none;
        border-right: none;
    }
    .tkEditbtn{
        border: 0px;
        height: 30px;
        width: 50px;
        color:white;
        background-color: dodgerblue;
    }
    input{
        border: 1px solid lightslategrey;
        background-color: #F2F2F2;
    }
    select{
        background-color: #F2F2F2;
    }
    .mybutton{
        margin: 0 auto;
        border: 0px;
        height: 30px;
        width: 100px;
        color:white;
        background-color: dodgerblue;
    }
    #addTk {
        position: absolute;
        top: 200px;
        left: 600px;
        width: 400px;
        height: 400px;
        background-color: #F2F2F2;
        display: none;
        padding: 5px;
        z-index: 10;
    }

    #zhe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        filter: alpha(opacity:60);
        opacity: 0.6 !important;
        display: none;
        z-index: 2;
        background: grey;
    }
    #closeZhe{
        text-decoration: none;
        color: black;
    }
    body{
        background-color: #F2F2F2;
    }
    .addModelDiv{
        padding-left: 50px;

    }
</style>
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<body>
<div id="tkDiv">
    <div id="title">海量题库</div>
    <hr/><br/><br/>
    <div id="searchDiv">
        <input type="text" id="search" name="search" size="60" placeholder="请输入要搜索的题目">&nbsp;
        <input type="button" class="searchbtn" btnId="1" value="搜索选择题">&nbsp;
        <input type="button" class="searchbtn" btnId="2" value="搜索判断题">
    </div>
    <br/><br/>
    <!--按试题类型查询-->
    <table width="100%">
        <tr>
            <td width="100px"><input type="button" class="styleSel" id="select" value="选择题"></td>
            <td width="100px"><input type="button" class="styleSel" id="judge" value="判断题"></td>
            <td><input type="button" value="添加试题" id="addTkbtn"></td>
        </tr>
    </table>
    <br/>
    <!--添加试题-->
    <div id="zhe"></div>         <!--遮罩层-->
    <div id="addTk">              <!--弹出的添加试题框-->
        <input type="image" style="float: right" src="/image/delbtn.png" id="closeZhe"> <br/>
        请选择要添加的试题类型：
        <br/>
        <input type="radio" name="addStyle" id="addSelect" value="select" class="addStyle">选择题
        <input type="radio" name="addStyle" id="addJudge" value="judge" class="addStyle">判断题<br/>
    </div>

    <!--题库列表-->
    <table id="tkTab" border='0'>
        <th width="710px" style="text-align: left">试题</th>
        <th width="100px">正确答案</th>
        <th>操作</th>
    </table>
</div>
<!--分页操作-->
<div id="pageControl">
    <a href="#title" class="turn" id="first">首页</a>
    <a href="#title" class="turn" id="last">上一页</a>
    <a href="#title" class="turn" id="next">下一页</a>
    <a href="#title" class="turn" id="end">尾页</a>
</div>

<script>
    var currPage;     //页码
    var totalPages;   //总页数
    var styleIdReturn;  //试题类型
    var currSize;       //当前题型在页面中的条数

    $(function () {
        //这里是异步实现分页和分类展示试题=====================================
        var getTkList = function (curr, styleId,Size) {
            $.ajax({
                url: "TkMgrServlet",
                type: "post",
                data: {
                    pageIndex: curr || 1,
                    styleId: styleId ||1,
                    pageSize: Size||10,
                    keyword:$("#search").val()
                },
                dataType: "JSON",
                success: function (data) {
                    $("#search").val(""); //清空搜索框
                    styleIdReturn = data.styleIdReturn;     //获得返回的题型
                    currPage = data.pageIndex;                //获得当前页
                    totalPages = data.totalPages;             //获得总页数
                    currSize=data.currSize;            //获得当前题型在页面中的条数

                    $("#tkTab").find("tr[class='tktr']").remove();     //清除前面的数据，以免后面堆积
                    if (data != null) {
                        $.each(data.tkList, function (index, obj) {
                            var $item = (obj.tContent || "").split("#");        //将每道题的题目与选项以"#"分隔

                            var $tktr = "";                     //定义一个字符串，后面为其赋值不同的题型

                            var $selectTr="<tr class='tktr'>" +       //将选择题赋给变量
                                "<td colspan='3'>" +
                                "<table class='selectTab' border='0'>" +
                                "<tr>" +
                                "<td class='tkIndex'>"+(index+1+(currPage-1)*10)+"</td>" +
                                "<td class='tkForEdit'>" +$item[0] + "</td>" + //题目
                                "<td class='answerOption' rowspan='5'>" + obj.tAnswer + "</td>" +
                                "<td rowspan='5' class='operation'><input type='button' class='tkEditbtn' value='修改' name='selectbtn'>&nbsp;" +
                                "<input type='hidden' class='tid' value='" + obj.tId + "'>" +
                                "</td>" +
                                "</tr>" +
                                "<tr>" +
                                "<td class='tkForEdit' colspan='2'>" + $item[1] + "</td>" +  //A选项
                                "</tr>" +
                                "<tr>" +
                                "<td class='tkForEdit' colspan='2'>" + $item[2] + "</td>" +   //B选项
                                "</tr>" +
                                "<tr>" +
                                "<td class='tkForEdit' colspan='2'>" + $item[3] + "</td>" +   //C选项
                                "</tr>" +
                                "<tr>" +
                                "<td class='tkForEdit' colspan='2'>" + $item[4] + "</td>" +    //D选项
                                "</tr>" +
                                "</table>" +
                                "</td>" +
                                "</tr>";

                            var $judgeTr="<tr class='tktr'>" +        //将判断题赋给变量
                                "<td colspan='3'>" +
                                "<table class='judgeTab' border='0'>" +
                                "<tr>" +
                                "<td class='tkIndex' >"+(index+1+(currPage-1)*25)+"</td>" +
                                "<td class='tkForEdit' colspan='2'>" + $item[0] + "</td>" +
                                "<td class='answerOption' rowspan='5'>" + obj.tAnswer + "</td>" +
                                "<td rowspan='5' class='operation'><input type='button' class='tkEditbtn' value='修改' name='judgebtn'> &nbsp;" +
                                "<input type='hidden' class='tid' value='" + obj.tId + "'>" +
                                "</td>" +
                                "</tr>" +
                                "</table>" +
                                "</td>" +
                                "</tr>";
                            if (styleIdReturn == "1") {            //如果返回题型为1，则显示选择题
                                $tktr = $selectTr;
                                $("#tkTab").append($tktr);
                            } else if (styleIdReturn == "2") {            //如果返回题型为2，则显示判断题
                                $tktr = $judgeTr;
                                $("#tkTab").append($tktr);
                            }
                        });
                    }

                    //这里开始修改试题=========================================
                    $(".tkEditbtn").toggle(
                        function () {    //第一次点击，设置文本框提供修改，并将按钮变为确认；第二次点击，取消文本框，并将按钮恢复为修改
                            var $tkValues = new Array();           //变量$tkValues用来存题目和选项

                            var $tr = $(this).parent().parent().parent().find("tr");  //获取被点击按钮的那道题
                            var $btnName = $(this).attr("name");

                            //修改答案时出现下拉列表
                            var $options = null;
                            if ($btnName == "selectbtn") {
                                $options = ["A", "B", "C", "D"];//把选择题选项作为数组赋给变量$option
                            } else if ($btnName == "judgebtn") {
                                $options = ["对", "错"];
                            }

                            var $answer = $tr.find("td[class='answerOption']").text();

                            var $select = "<select class='opt'>" +                 //把下拉列表赋给$select
                                "<option value='" + $answer + "'>" + $answer + "</option>" +
                                "</select>";

                            $tr.find("td[class='answerOption']").html($select);   //把下拉列表添加到放答案的td中

                            for (var i = 0; i < $options.length; i++) {            //把每个选项追加到下拉列表中
                                if ($options[i] != $answer) {
                                    var $op = "<option value='" + $options[i] + "'>" + $options[i] + "</option>"
                                    $tr.find("td[class='answerOption']").find("select[class='opt']").append($op);
                                }
                            }

                            $tr.find("td[class='tkForEdit']").each(function (key) {       //获得题目和选项的值存入变量$trValues
                                $tkValues[key] = $(this).text();
                                $(this).html("<input type='text' class='item' size='100'  value='" + $tkValues[key] + "'>"); //将存放题目的td放入文本框供老师编辑
                            });
                            this.value = "确认";              //第一次点击后，将按钮值变为确认
                        },

                        function () {
                            var $tContent="";
                            var $tkValues2 = new Array();
                            var $tr2 = $(this).parent().parent().parent().find("tr");
                            $tr2.find("input[class='item']").each(function (key) {
                                $tkValues2[key] = $(this).val();        //获得文本框中的值
                                $tContent += $tkValues2[key] + "#";
                                $(this).parent().html($tkValues2[key]);    //将文本框中的值插入到td标签中
                            });

                            var $selectValue=new Array();          //定义一个存储下拉列表值的数组
                            var $selectAnswer="";                //定义要填充到答案td中的变量
                            $tr2.find("select[class='opt']").each(function (key) {
                                $selectValue[key]=$(this).val();
                                $selectAnswer+=$selectValue[key];          //将修改后的值赋给$selectAnswer
                                $(this).parent().html($selectAnswer[key]);
                            });

                            var $tId = $tr2.find("input[class='tid']").val();    //获取要修改的试题id
                            this.value = "修改";

                            //数据准备传输到后台
                            $.ajax({
                                type: "post",
                                url: "EditTkServlet",
                                data: {
                                    "tkValues": $tContent,        //试题
                                    "tAnswer": $selectAnswer,     //答案
                                    "tId": $tId                  //题号
                                },
                                success: function (data2) {
                                    if (data2 == "true") {
                                        alert("修改成功");
                                    } else {
                                        alert("貌似出了点问题，修改不成功诶");
                                    }
                                }
                            })
                        }
                    );

                    //这里开始添加试题=================================
                    //点击添加按钮遮罩层和添加层出现
                    $("#addTkbtn").click(function () {
                        $("#zhe").css({"height":$(document).height(),"width":$(document).width()});
                        $("#addTk").show();
                        $("#zhe").show();

                        //点击返回隐藏遮罩层和添加试题层
                        $("#closeZhe").click(function () {
                            $("#zhe").hide();
                            $("#addTk").hide();
                        });

                        //单选按钮改变出现相应的试题模板

                        var $styleId=0;        //试题类型，用于后面的ajax传值
                        $(".addStyle").change(function () {
                            var $selectModel="<div class='addModelDiv'>问题：<input type='text' name='question' id='question' class='addModel'><br><br/>" +
                                "选项A:<input type='text' name='A' id='A' class='addModel'><br/><br/>" +
                                "选项B:<input type='text' name='B' id='B' class='addModel'><br/><br/>" +
                                "选项C:<input type='text' name='C' id='C' class='addModel'><br/><br/>" +
                                "选项D:<input type='text' name='D' id='D' class='addModel'><br/><br/>" +
                                "答案:<select class='addAnswer' >" +
                                "<option value='A'>A</option>" +
                                "<option value='B'>B</option>" +
                                "<option value='C'>C</option>" +
                                "<option value='D'>D</option>" +
                                "</select><br/><br/>" +
                                "<input type='button' id='addSurebtn' class='mybutton' value='确认添加'></div>" ;
                            var $judgeModel="<div class='addModelDiv'>判断句:<input type='text' name='addJudge' id='addJudge' class='addModel'><br/><br>" +
                                "答案:<select class='addAnswer'>" +
                                "<option value='对'>对</option>" +
                                "<option value='错'>错</option>" +
                                "</select><br/><br/>" +
                                "<input type='button' id='addSurebtn' class='mybutton'  value='确认添加'></div>" ;
                            //获取单选按钮的选取值
                            var $addModel=$("input[name='addStyle']:checked").val();

                            //每次改变先清除原来的模板
                            $("#addTk").find(".addModelDiv").remove();
                            //根据选择的值在div中添加不同的模板
                            if($addModel=="select"){
                                $("#addTk").append($selectModel);
                                $styleId=1;
                            }else if($addModel=="judge"){
                                $("#addTk").append($judgeModel);
                                $styleId=2;
                            }

                            //点击确定添加按钮触发事件
                            $("#addSurebtn").click(function () {
                                //获取输入的问题及选项集合
                                var $addTkArray=new Array();
                                $(".addModelDiv").find("input[class='addModel']").each(function (key) {
                                    $addTkArray[key]=$(this).val();
                                });
                                //将试题变成字符串传到后台
                                var $addTkString="";
                                if($styleId==1){
                                    $addTkString=$addTkArray[0]+"#A:"+$addTkArray[1]+"#B:"+$addTkArray[2]+"#C:"+$addTkArray[3]+"#D:"+$addTkArray[4];
                                }else if($styleId==2){
                                    $addTkString=$addTkArray[0]+"#对#错";
                                }

                                //获取输入的答案
                                var $addAnswer=$(".addModelDiv").find("select[class='addAnswer']").val();

                                //点击添加后清空输入的试题
                                $(".addModel").each(function () {
                                   $(this).val("");
                                });
                                //每次添加完答案恢复为默认值
                                if(styleId==1){
                                    $(".addModelDiv").find("option:contains('A')").attr("selected",true);
                                }else if(styleId==2){
                                    $(".addModelDiv").find("option:contains('对')").attr("selected",true);
                                }

                                //向后台传送数据
                                $.ajax({
                                    type:"post",
                                    url:"AddTkServlet",
                                    data:{
                                        addTkString:$addTkString,
                                        addAnswer:$addAnswer,
                                        styleId:$styleId
                                    },
                                    success:function (data3) {
                                        if(data3=="true"){
                                            getTkList(currPage, styleIdReturn,currSize);
                                            alert("添加成功");
                                        }else {
                                            alert("是哪里出了问题，添加失败了");
                                        }
                                    }
                                });
                            });

                        });

                    });
                }
            });
        };


        //这里承接上面分页和分类查询=======================================
        getTkList(1, 1,10);       //获取试题列表

        //为关键字搜索添加点击事件
        $(".searchbtn").click(function () {
            var $searchId=$(this).attr("btnId");
            if($searchId=="1"){
                getTkList(1, 1,10);
            }else if($searchId=="2"){
                getTkList(1, 2,25);
            }
        });

          //为分页链接添加点击事件
        $(".turn").click(function () {
            var turnId = $(this).attr("id");    //获取被点击的链接的id值

            //点击不同的分页链接，为getList()传递相应的参数
            if (turnId == "first") {
                currPage = 1;
                getTkList(1, styleIdReturn,currSize);
            } else if (turnId == "last") {
                currPage--;
                if (currPage <= 0) {
                    currPage = 1;
                }
                getTkList(currPage, styleIdReturn,currSize);
            } else if (turnId == "next") {
                currPage++;
                if (currPage >= totalPages) {
                    currPage = totalPages;
                }
                getTkList(currPage, styleIdReturn,currSize);
            } else if (turnId == "end") {
                getTkList(totalPages, styleIdReturn,currSize);
            }
        });

          //为选择题型链接添加点击事件
        $(".styleSel").click(function () {
            var styleType = $(this).attr("id");    //获取被点击的链接的id值

            //点击不同的题型查询链接，为getList()传递相应的参数
             if (styleType == "select") {
                getTkList(1, 1,10);
            } else if (styleType == "judge") {
                getTkList(1, 2,25);
            }
        });
    });
</script>
</body>
</html> 